function getTimeDifference(time1, time2) {
    let diffTime = Math.round(Math.abs(time1.getTime() - time2.getTime()) / 1000);
    let day = parseInt(diffTime / (60 * 60 * 24));
    let hours = parseInt(diffTime % (60 * 60 * 24) / (60 * 60));
    let minutes = parseInt(diffTime % (60 * 60) / 60);
    let seconds = parseInt(diffTime % 60);
    return {
        day: day,
        hours: hours,
        minutes: minutes,
        seconds: seconds
    }
}

const target = new Date(2021, 8, 20, 20, 0, 0);
// const target = new Date('2021-8-20T03:24:00');
// let target = new Date();
// target.setFullYear(2021);
// target.setMonth(8);
// target.setDate(20);
// target.setHours(8);
// target.setMinutes(30);
// target.setSeconds(30);

function countDown() {
    let current = new Date();
    let diff = getTimeDifference(current, target);
    if (diff.day < 10) diff.day = "0" + diff.day;
    if (diff.hours < 10) diff.hours = "0" + diff.hours;
    if (diff.minutes < 10) diff.minutes = "0" + diff.minutes;
    if (diff.seconds < 10) diff.seconds = "0" + diff.seconds;

    // dayBox.innerHTML = diff.day;
    $('#dayBox').html(diff.day);
    $('#hoursBox').html(diff.hours);
    $('#minutesBox').html(diff.minutes);
    $('#secondsBox').html(diff.seconds);
}

countDown();
setInterval(countDown, 1000);


let swiper = new Swiper('.container2', {
    slidesPerView: 3,
    spaceBetween: 30,
    slidesPerGroup: 3,
    loop: true,
    loopFillGroupWithBlank: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});


let swiper2 = new Swiper('.container3', {
    // spaceBetween: 30,
    //     // effect: 'fade',
    //     // pagination: {
    //     //     el: '.swiper-pagination',
    //     //     clickable: true,
    //     // },
    //     // navigation: {
    //     //     nextEl: '.swiper-button-next',
    //     //     prevEl: '.swiper-button-prev',
    //     // },
    spaceBetween: 30,
    slidesPerGroup: 3,
    effect: 'fade',
    loop: true,
    loopFillGroupWithBlank: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

const options = {
    url: "http://localhost:8080/static/data/cardData/dataShop.json",
    success: result => {
        // console.log(result);
        // console.log(result[1]);
        getShopData(result);
    }
}

$.ajax(options);

function getShopData(data) {

    let res = data.map((item, index) => {
        return `<div class="box4-t">
                <p>${item.bigTitle}</p>
            </div>
            <div class="box4-b">
                <img data-src="${item.LBimgs}" alt="">
                <div class="box4-z">
                    <div class="box4-zt">
                        <img data-src="${item.SBimg[index].SBimgs}" alt="">
                    </div>
                    <div class="box4-zt">
                        <img data-src="${item.SBimg[index + 2].SBimgs}" alt="">
                    </div>
                </div>
                <div class="box4-z">
                    <div class="box4-zt">
                        <img data-src="${item.SBimg[index + 1].SBimgs}" alt="">
                    </div>
                    <div class="box4-zt">
                        <img data-src="${item.SBimg[index + 3].SBimgs}" alt="">
                    </div>
                </div>
            </div>`
    }).join("");

    setTimeout(() => {
        $('#box4').append(res);
        new lazyLoad("#box4 img")
    }, 300)

}


const options1 = {
    url: "http://localhost:8080/static/data/cardData/dataShopC.json",
    success: result => {
        // console.log(result);
        // console.log(result[1]);
        randerC(result);
    }
}

$.ajax(options1);

function randerC(data) {
    let res = data.map((item,) => {
        let index = 0;
        return `
        <div class="swiper-slide swiper-slide4">
            <div class="LboxB">
                <img src="${item.LImg}" alt="">
            </div>
            <div class="CboxB">
                <div class="lbox">
                    <img src="${item.MImg}" alt="">
                </div>
                <div class="rbox">
                    <img src="${item.sImg}" alt="">
                    <p>${item.Title}</p>
                    <span class="sp1">${item.price}</span>
                    <span class="sp2">${item.sale}</span>
                    <span class="sp3">立即查看</span>
                </div>
            </div>
            <div class="RboxB">
                <div class="RboxS">
                    <span>No.2</span>
                    <img src="${item.RImg['url'+(index+1)]}" alt="">
                </div>
                <div class="RboxS">
                    <span>No.2</span>
                    <img src="${item.RImg['url'+(index+2)]}" alt="">
                </div>
                <div class="RboxS">
                    <span>No.2</span>
                    <img src="${item.RImg['url'+(index+3)]}" alt="">
                </div>
                <div class="RboxS">
                    <span>No.2</span>
                    <img src="${item.RImg['url'+(index+4)]}" alt="">
                </div>
            </div>
        </div>`
    }).join('');
    setTimeout(() => {
        $('.swiper-wrapper4').append(res);
        swiper4();
        new lazyLoad("#box4 img")
    }, 300)
    // $('.swiper-wrapper4').append(res);
    // swiper4();
}


function swiper4() {
    let swiper4 = new Swiper('.swiper-container4', {
        slidesPerView: 1,
        spaceBetween: 30,
        slidesPerGroup: 1,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}